<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--分页-->
    <!--第几页？一页有几条？-->
    页码：<input type="text" v-model="pageCurrent">
    <br>
    每页有几条数据：<input type="text" v-model="pageSize"><br>
    <!--按条件查询-->
    <!--username,gender,email-->
    username：<input type="text" v-model="pageUser.username"><br>
    gender：<input type="text" v-model="pageUser.gender"><br>
    email：<input type="text" v-model="pageUser.email"><br>
    <button @click="find">查询</button>
    <ul>
        <li v-for="user in users" :key="index">
            {{user.id}}--{{user.username}}--{{user.gender}}--{{user.password}}--{{user.email}}
        </li>
    </ul>

</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            users: [],
            pageSize: 5,
            pageCurrent: 1,
            pageUser: {
                "username": "",
                "gender": "",
                "email": ""
            }
        },
        created() {
            this.find();
        },
        methods: {
            find(){
                axios.post("/users/" + this.pageCurrent + "/" + this.pageSize, this.pageUser).then(res => {
                    this.users = res.data;
                })
            }
        }
    });
</script>
</body>
</html>